 <template>
   <div class="tab-bar">
  <van-tabbar v-model="active" route>
  <van-tabbar-item 
  v-for = "nav in navs"
  :key="nav.path"
  :to="nav.path" 
  :icon="(nav.meta?.icon as string)"
   >{{ nav.meta?.title}}</van-tabbar-item>
<!-- 
  <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item to="/category" icon="list-switch">分类</van-tabbar-item>
  <van-tabbar-item to="cart" icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item to="mine" icon="user-o">我的</van-tabbar-item> -->
</van-tabbar>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import routes from '@/router/routes'

 //tabba上激活的标签索引
 const active = ref(0);

 //routes数组中筛选出需要在tabbar上渲染的 tab 项数据
//  const navs = routes.filter(route =>route.meta && route.meta.inTabbar)
 const navs = routes.filter(route =>route.meta ?. inTabbar)

 console.log("navs:",navs)
 </script> 
 
 <style lang="less" scoped>
  
 </style>
  